<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#parent{
				
			}
			#child{
				display: none;
			}
			
		</style>
	</head>
	<body>
		<div id="parent">
			父元素
			<div id="child"> 子元素 </div>
			<div></div>
		</div>
	</body>
	<script src="js/jquery-1.8.3.js"></script>
	<script>
		$(function(){
			$("#parent").click(function(){
				$(this).find("#child").css("display","block")        
			})
			// 可以操作子元素 在第二次进入子元素的时候会执行
			$("#parent").mouseover(function(){
				$(this).css("background","blue")
			})
			// 不会操作子元素 在第二次进入子元素的时候不会执行
			$("#parent").mouseenter(function(){
				$(this).css("background","red");
			});
			
			//鼠标的离开  多次操作子元素
			$("#parent").mouseout();
			// 第二次不执行
			$("#parent").mouseleave();
		})
	</script>
</html>
